<template>
  <div>
    <el-dialog
      :visible.sync="previewdialog"
      :show-close="false"
      top="60px"
      append-to-body
      width="20%">
      <div class="bg">
        <img src="./bg.png" mode="scaleToFill" />
        <div class="list">
          <div :class="['item',item.defaultDisplay == 1?'item_true':'']" v-for="item in amountList" :key="item.id">
            <div class="money">{{item.money}}元</div>
            <div class="text">{{item.showText}}</div>
            <div class="tips" v-if="item.tips">{{item.tips}}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    props: {
      amountList: {
        default: '',
        type: Array
      }
    },
    data () {
      return {
        previewdialog: false,
      }
    },
    computed: {
      
    },
    methods: {
      
    }
  }
</script>

<style lang="scss" scoped>
  .bg {
    position: relative;
    width: 100%;
    .list {
      top: 16%;
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0 4%;
      .item {
        width: 48%;
        height: 46px;
        background: #ffffff;
        margin-right: 4%;
        margin-bottom: 10px;
        box-sizing: border;
        text-align: center;
        border-radius: 6px;
        border: solid 1px #EAEAEA;
        display: flex;
        justify-content: center;
        flex-direction: column;
        position: relative;
        .money {
          font-size: 14px;
        }
        .text {
          font-size: 10px;
          margin-top: 2px;
        }
        .tips {
          padding: 4px 16px;
          background: linear-gradient(135deg, #FB8B74 0%, #FE2C4B 100%);
          border-radius: 15px 4px 15px 15px;
          position: absolute;
          top: -8px;
          right: -14px;
          font-size: 12px;
          transform: scale(0.7);
          color: #ffffff;
        }
      }
      .item:nth-child(2n) {
        margin-right: 0;
      }
      .item_true {
        background: linear-gradient(135deg, #80D4FF 0%, #27AFF6 100%);
        color: #ffffff;
        border: solid 1px #80D4FF;
      }
    }
  }
</style>
